<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title></title>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	div{
		width: 500px;
		margin: 10px auto;
		text-align: center;
	}
	ul{
	overflow: hidden;
	list-style: none;
	}
	ul li{
		width: 100px;
		height: 100px;
		background-image: url("./image/star-off.png");
		float: left;
	}
	ul li.special{
		background-image: url("./image/star-on.jpg");
	}
</style>	
</head>
<body>
<div>
<ul>

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>
<p>您的评分为：<span>0</span> 颗星</p>

</div>
<script>
	$(function(){
		
	
		//点击事件 鼠标 移动在哪 哪儿就亮
		$('li').mouseover(function(){
			$('li').removeClass('special')
			$(this).prevAll().addBack().addClass('special')
			//分数显示
			// console.log($(this).index());
			$('P>span').text($(this).index()+1);
			//弹窗
		}).click(function(){
			alert('您的评分为:'+$('P>span').text()+'分');
		})
		
		
		
		
		
		
		// //点击事件 鼠标 移动在哪 哪儿就亮
		// $('li').mouseover(function(){
		// 	$('li').removeClass('special')
		// 	$(this).prevAll().addBack().addClass('special')
		
		// })
		
		
		// //点击事件  返回
		// $('li').click(function(){
		// 	$('li').removeClass('special')
		// 	$(this).prevAll().addBack().addClass('special')
		
		// })
		
		
		// //点击事件  点一个 前2个也亮
		// $('li').click(function(){
		// 	$('li').removeClass('special')
		// 	$(this).prevAll().addClass('special')
		// 	$(this).addClass('special')
		// })
		
		// //点击事件 单点一个亮 其他不亮
		// $('li').click(function(){
		// 	$('li').removeClass('special')
		// 	$(this).addClass('special')
		// })
		
		// // //点击事件 点谁亮谁
		// // $('li').click(function(){
		// // 	$(this).addClass('special')
			
		// })
		// $('li').addClass('special');
		
	})
	
	
	
	
</script>
</body>
</html>
<!-- var lis=document.getElementsByTagName('li');
var span=document.getElementById("span");//找到id



for(let index in lis){

let num=Number(index)+1;
// lis[index].onclick=function(){
lis[index].onmouseover=function(){
init();
// var num=Number(index)+1;
for(let i=0;i<=index;i++){
//定义 星星
// // var num=index+1;
// var num=Number(index)+1;

lis[i].classList.add("special");
span.innerHTML=num;
}
}
//点击事件
lis[index].onclick=function(){
// var num=Number(index)+1;
alert("您的评分为："+num+" 颗星哟")
}
}
//全灭再重新点
function init(){
for(let li of lis){
li.classList.remove("special");
}
} -->